<template>
  <div>
    <el-card>
      <el-row :gutter="25">
        <el-col :span="4"
                class="queryType">
          <div>
            <label>请选择查询的类型：</label>
          </div>

        </el-col>
        <el-col :span="4">
          <el-select v-model="queryType"
                     placeholder="请选择">
            <el-option v-for="item in options"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="10">
          <!-- 搜索添加 -->

          <el-input placeholder="请输入搜索内容"
                    v-model="queryInfo.query"
                    @clear="getAllStudents()"
                    clearable>
            <el-button slot="append"
                       @click="queryStudent()"
                       icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary"
                     @click="showStudentInfoDialog(null,'新增')">添加用户</el-button>
        </el-col>

        <el-table :data="studentList"
                  border
                  height="400"
                  stripe>
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left"
                       inline
                       class="demo-table-expand">
                <el-form-item label="学号：">
                  <span>{{ props.row.studentId }}</span>
                </el-form-item>
                <el-form-item label="姓名：">
                  <span>{{ props.row.studentName }}</span>
                </el-form-item>
                <el-form-item label="性别：">
                  <span>{{ props.row.studentSex }}</span>
                </el-form-item>
                <el-form-item label="出生日期：">
                  <span>{{ props.row.studentBirth }}</span>
                </el-form-item>
                <el-form-item label="民族：">
                  <span>{{ props.row.studentNationLity }}</span>
                </el-form-item>
                <el-form-item label="院：">
                  <span>{{props.row.studentParentDeptName}}</span>
                </el-form-item>
                <el-form-item label="系：">
                  <span>{{props.row.studentDeptName}}</span>
                </el-form-item>
                <el-form-item label="班级：">
                  <span>{{props.row.studentClassName}}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <!-- 索引列 -->
          <el-table-column type="index"
                           label="序号"></el-table-column>
          <el-table-column label="学号"
                           prop="studentId"></el-table-column>
          <el-table-column label="姓名"
                           prop="studentName"></el-table-column>
          <el-table-column label="性别"
                           prop="studentSex"></el-table-column>
          <el-table-column label="出生日期"
                           prop="studentBirth"></el-table-column>
          <el-table-column label="班级"
                           prop="studentClassName">
          </el-table-column>
          <!-- <el-table-column label="院系"
                           prop="studentDeptId">
                           </el-table-column> -->
          <el-table-column label="操作">
            <template slot-scope="scope">
              <!-- 详情 -->
              <el-tooltip effect="dark"
                          content="详情"
                          placement="top-start"
                          :enterable="false">
                <!--文字提示 enterable 隐藏-->
                <el-button type="primary"
                           icon="el-icon-edit"
                           @click="showDetailsDialog(scope.row)"
                           size="mini"></el-button>
              </el-tooltip>

              <!-- 编辑 -->
              <el-tooltip effect="dark"
                          content="修改"
                          placement="top-start"
                          :enterable="false">
                <!--文字提示 enterable 隐藏-->
                <el-button type="warning"
                           @click="showStudentInfoDialog(scope.row,'修改')"
                           icon="el-icon-setting"
                           size="mini"></el-button>
              </el-tooltip>

            </template>
          </el-table-column>
        </el-table>
        <!-- 分页部分 -->
        <!-- 分页 size-change 每页最大数变化 current-change 页数变化 layout 功能组件-->
        <div>
          <el-pagination @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"
                         :current-page="queryInfo.pageNum"
                         :page-sizes="[1, 2, 5, 10,20]"
                         :page-size="queryInfo.pageSize"
                         layout="total, sizes, prev, pager, next, jumper"
                         :total="studentCount"></el-pagination>
        </div>
      </el-row>
    </el-card>

    <el-drawer :title="addOrUpdate"
               :visible.sync="drawer"
               :close-on-press-escape="false"
               :modal="true"
               size="50%"
               :wrapperClosable="false"
               direction="rtl"
               :before-close="handleClose">

      <el-card class="editDialog">
        <el-form :model="studentInfo"
                 :rules="studentInfoRules"
                 ref="studentInfoRef"
                 label-position="right"
                 label-width="70px"
                 size="medium">
          <!-- 学号 -->
          <el-form-item label="学号"
                        prop="studentId">
            <el-input v-model.number="studentInfo.studentId"
                      :disabled="showStudentIdInput"></el-input>
          </el-form-item>
          <!-- 姓名 -->
          <el-form-item label="姓名"
                        prop="studentName">
            <el-input v-model="studentInfo.studentName"></el-input>
          </el-form-item>
          <!-- 性别 -->
          <el-form-item label="性别"
                        prop="studentSex">
            <el-radio-group v-model="studentInfo.studentSex">
              <el-radio label="男">男</el-radio>
              <el-radio label="女">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <!-- 出生日期 -->
          <el-form-item label="出生日期"
                        prop="studentBirth">
            <el-date-picker v-model="studentInfo.studentBirth"
                            type="date"
                            placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <!-- 民族 -->
          <el-form-item label="民族"
                        prop="studentBirth">
            <el-select v-model="studentInfo.studentNationLity"
                       filterable
                       placeholder="民族">
              <el-option v-for="nation in nation_data"
                         :key="nation.id"
                         :label="nation.name"
                         :value="nation.id">
              </el-option>
            </el-select>
          </el-form-item>
          <!-- 班级 -->
          <el-form-item label="班级"
                        prop="studentClassName">
            <el-cascader :props="defaultParams"
                         :options="deptList"
                         filterable
                         v-model="deptValue"
                         @change="handleChange()"
                         :clearable="true">
            </el-cascader>
          </el-form-item>
          <el-form-item>
            <template>{{this.deptValue}}</template>
          </el-form-item>
          <el-form-item>
            <span class="drawer_floot">
              <el-button type="primary"
                         size="small"
                         @click="sure(studentInfo)">确定</el-button>
              <el-button type="info"
                         size="small">取消</el-button>
            </span>

          </el-form-item>

        </el-form>

      </el-card>

    </el-drawer>

  </div>

</template>
<script>
export default {
  created () {
    this.getAllStudents();
  },
  data () {
    return {
      // 查询信息
      addOrUpdate: '修改',
      showStudentIdInput: true, //是否禁用学号输入框
      queryInfo: {
        query: '',
        type: '',
        pageNum: 1,
        pageSize: 5
      },
      studentList: [],
      studentInfo: {},
      deptList: [],
      deptValue: [],
      options: [
        {
          value: 'studentId',
          label: '学号'
        }, {
          value: 'studentName',
          label: '姓名'
        }, {
          value: 'studentSex',
          label: '性别'
        }, {
          value: 'studentBirth',
          label: '生日'
        }, {
          value: 'studentNationLity',
          label: '民族'
        }, {
          value: 'studentClassName',
          label: '班级'
        }, {
          value: 'studentDeptName',
          label: '院系'
        }
      ],
      queryType: 'studentName',
      studentCount: 0,
      addDialogVisible: false,
      drawer: false,
      nation_data: [
        { id: 1, name: '汉族' },
        { id: 2, name: '蒙古族' },
        { id: 3, name: '回族' },
        { id: 4, name: '藏族' },
        { id: 5, name: '维吾尔族' },
        { id: 6, name: '苗族' },
        { id: 7, name: '彝族' },
        { id: 8, name: '壮族' },
        { id: 9, name: '布依族' },
        { id: 10, name: '朝鲜族' },
        { id: 11, name: '满族' },
        { id: 12, name: '侗族' },
        { id: 13, name: '瑶族' },
        { id: 14, name: '白族' },
        { id: 15, name: '土家族' },
        { id: 16, name: '哈尼族' },
        { id: 17, name: '哈萨克族' },
        { id: 18, name: '傣族' },
        { id: 19, name: '黎族' },
        { id: 20, name: '傈僳族' },
        { id: 21, name: '佤族' },
        { id: 22, name: '畲族' },
        { id: 23, name: '高山族' },
        { id: 24, name: '拉祜族' },
        { id: 25, name: '水族' },
        { id: 26, name: '东乡族' },
        { id: 27, name: '纳西族' },
        { id: 28, name: '景颇族' },
        { id: 29, name: '柯尔克孜族' },
        { id: 30, name: '土族' },
        { id: 31, name: '达翰尔族' },
        { id: 32, name: '么佬族' },
        { id: 33, name: '羌族' },
        { id: 34, name: '布朗族' },
        { id: 35, name: '撒拉族' },
        { id: 36, name: '毛南族' },
        { id: 37, name: '仡佬族' },
        { id: 38, name: '锡伯族' },
        { id: 39, name: '阿昌族' },
        { id: 40, name: '普米族' },
        { id: 41, name: '塔吉克族' },
        { id: 42, name: '怒族' },
        { id: 43, name: '乌孜别克族' },
        { id: 44, name: '俄罗斯族' },
        { id: 45, name: '鄂温克族' },
        { id: 46, name: '德昂族' },
        { id: 47, name: '保安族' },
        { id: 48, name: '裕固族' },
        { id: 49, name: '京族' },
        { id: 50, name: '塔塔尔族' },
        { id: 51, name: '独龙族' },
        { id: 52, name: '鄂伦春族' },
        { id: 53, name: '赫哲族' },
        { id: 54, name: '门巴族' },
        { id: 55, name: '珞巴族' },
        { id: 56, name: '基诺族' },

      ],
      defaultParams: {
        label: 'name',
        value: 'id',
        children: 'subList',
        expandTrigger: 'hover'
      },
      studentInfoRules: {
        studentId: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { type: 'number', message: '账号必须为数字', trigger: 'blur', min: 10 }
        ],
        studentName: [
          { required: true, message: '姓名不能为空', trigger: 'blur' }
        ],
        studentSex: [
          { required: true, message: '请选择性别', trigger: 'blur' }
        ],
        studentBirth: [
          { type: 'date', required: true, message: '请选择出生日期', trigger: 'blur' }
        ],
        studentNationLity: [
          { required: true, message: '请选择民族', trigger: 'blur' }
        ],
        // studentClassName: [
        //   { required: true, message: '班级不能为空', trigger: 'change' },
        // ]

      },


    }
  },
  methods: {

    //按条件查询学生
    async getAllStudents () {
      // console.log(this.queryInfo);
      const { data: res } = await this.$http.get("/student/queryStudentByCondition", {
        params: this.queryInfo
      });
      // const { data: res1 } = await this.$http.get("/dept/queryAllDept");
      this.deptList = res.data.deptList;
      this.studentList = res.data.students;
      this.studentCount = res.data.studentCount;
      console.log("院系班级关系：");
      console.log(res.data.deptList);
      console.log(res.data.students);
      this.queryInfo.type = '';
    },
    // 设置查询类型，调用查询方法
    queryStudent () {
      this.queryInfo.type = this.queryType;
      this.getAllStudents();
    },
    // 分页的每页最大数
    handleSizeChange (newSize) {
      this.queryInfo.pageSize = newSize;
      this.getAllStudents();
    },
    // 分页的第几页
    handleCurrentChange (newPage) {
      this.queryInfo.pageNum = newPage;
      this.getAllStudents();
    },
    //关闭编辑学生信息抽屉
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    },
    // 显示编辑学生信息抽屉
    showStudentInfoDialog (newRow, type) {
      this.addOrUpdate = type; // 设置抽屉的标题
      // console.log('打开抽屉时deptValue：' + this.deptValue);
      if (this.addOrUpdate == '修改') {
        this.showStudentIdInput = true; //设置使用或禁用学号输入框
        this.studentInfo = newRow; // 将传入的学生信息显示到抽屉中
      } else {
        this.showStudentIdInput = false; //设置使用或禁用学号输入框
        this.studentInfo = {};
      }
      // console.log(this.studentInfo);
      // this.deptValue[0] = this.studentInfo.studentParentDeptId;
      // this.deptValue[1] = this.studentInfo.studentDeptId;
      // this.deptValue[2] = this.studentInfo.studentClassId;
      // console.log('赋值后的deptValue：' + this.deptValue);
      // console.log('赋值后的deptValue2：' + this.deptValue);
      this.drawer = true;
    },
    //级联选择器选择后的值
    handleChange () {
      this.studentInfo.studentDeptId = this.deptValue[1];
      this.studentInfo.studentClassId = this.deptValue[2];
      console.log('选择好后deptValue：' + this.deptValue);
    },
    // 点击确定按钮方法
    sure (newStudentInfo) {
      console.log(newStudentInfo);
      this.$confirm('此操作将' + this.addOrUpdate + '一条数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log("确定");
        console.log(this.addOrUpdate);
        if (this.addOrUpdate == '新增') {  //新增学生信息
          this.$refs.studentInfoRef.validate(async valid => {
            console.log(valid);
            if (!valid) return;
            if (!this.justStudent(newStudentInfo.studentId)) return;
            console.log('newStudentInfo==================>');
            this.addStudent(newStudentInfo); // 执行新增学生信息方法
          });
        } else {//修改学生信息
          console.log('UpdateStudentInfo==================>');
          this.updateStudent(newStudentInfo); // 执行新增学生信息方法
        }

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消' + this.addOrUpdate
        });
      });
    },
    // 新增学生信息方法
    async addStudent (newStudentInfo) {
      newStudentInfo.studentNationLity = this.getNationnalityName(newStudentInfo.studentNationLity);
      console.log(newStudentInfo);
      const { data: res } = await this.$http.post('/student/addStudent', newStudentInfo
      );
      console.log('111');
      if (res.code != 200) return this.$message.error("操作失败！！！");

      this.$message.success("操作成功！！！");
      this.drawer = false;
      this.getAllStudents();

      this.$message({
        type: 'success',
        message: this.addOrUpdate + '成功!'
      });

    },
    // 修改学生信息
    async updateStudent (newStudentInfo) {
      newStudentInfo.studentNationLity = this.getNationnalityName(newStudentInfo.studentNationLity);
      console.log(newStudentInfo);
      const { data: res } = await this.$http.put('/student/updateStudentById', newStudentInfo);
      console.log('222');
      if (res.code != 200) return this.$message.error("操作失败");
      // return this.$message.success(res.msg);
    },
    // 判断该学号是否存在
    async justStudent (studentId) {
      const { data: res } = await this.$http.get("/student/findStudentById?studentId=" + studentId);
      if (res.code == 404) {
        this.$message.error(res.msg);
        return false;
      } else {
        return true;
      }
    },
    // 根据民族编号获取民族的值
    getNationnalityName (nationId) {
      console.log(this.nation_data);
      let nation;
      for (let i = 0; i < 56; i++) {
        nation = this.nation_data[i];
        if (nationId == nation.id) {
          return nation.name;
        }
      }
      // let nationId0 = parseInt(nationId);
      // let i;
      // console.log("nationId:" + nationId);
      // for (i = 1; i <= 56; i++) {
      //   // console.log("nationId:" + nationId + "===>" + i);
      //   if (this.nation_data.id == nationId0) {
      //     // console.log(this.nation_data.id);
      //     console.log("nationId:" + nationId0 + "===>" + i);
      //     // return this.nation_data.name;
      //   } else {

      //     console.log("!nationId:" + nationId0 + "===>" + i + ":" + this.nation_data.id);
      //     // return "汉族";
      //   }
      // }
    }


  }
}
</script>
<style lang="less" scoped>
.el-table {
  margin-top: 20px;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.editDialog {
  margin-left: 10%;
  margin-right: 10%;
}
.drawer_floot {
}
</style>